<template>
  <div class="calendar">
    <div class="showDate" @click="handleCalendarShow">
      <span style="color:#000">范围：</span>
      <span>{{ displayDate[0] }}</span>
      <span> 至 </span>
      <span>{{ displayDate[1] }}</span>
    </div>
    <van-calendar
      ref="calendar"
      v-model="show"
      type="range"
      color="#1989fa"
      @confirm="onConfirm"
      @month-show="dateChange"
      :min-date="minDate"
      :max-date="maxDate"
    >
      <template v-slot:title>
        <div class="timeSelect">
          <span @click="scrollToDate('down', 'year')" class="btn">上一年</span>
          <span @click="scrollToDate('down', 'month')" class="btn">上一月</span>
          <span @click="reset" class="btn">重置</span>
          <span @click="scrollToDate('up', 'month')" class="btn">下一月</span>
          <span @click="scrollToDate('up', 'year')" class="btn">下一年</span>
        </div>
      </template>
    </van-calendar>
  </div>
</template>

<script>
import Vue from 'vue'
import moment from 'moment'
import { Calendar, Toast } from 'vant'
import { defaultDate, dateRangeMinMax, dateFormat } from '../../config/config.js'

Vue.use(Calendar)
Vue.use(Toast)
export default {
  name: 'demoPage',
  data() {
    return {
      // 日历副标题
      titleDate: {
        date: defaultDate[1],
        title: '选择日期'
      },
      // 日期格式
      dateFormat,
      minDate: dateRangeMinMax[0],
      maxDate: dateRangeMinMax[1],
      //默认时间范围
      defaultDate,
      //当前选择时间
      date: defaultDate,
      // 日期选择范围
      dateRangeMinMax,
      // 日历弹窗是否展示
      show: false
    }
  },
  computed: {
    //用于展示的时间
    displayDate() {
      return [moment(this.date[0]).format(dateFormat), moment(this.date[1]).format(dateFormat)]
    }
  },
  mounted() {},
  methods: {
    //日历弹窗方法
    handleCalendarShow() {
      this.show = true
      setTimeout(() => {
        //设置日历转到最新日期的展示界面
      }, 300)
      this.$refs.calendar.scrollToDate(new Date())
    },
    //选择日期触发方法
    onConfirm(date) {
      this.show = false
      this.date = date
    },
    //重置时间选择为默认时间
    reset() {
      this.date = this.defaultDate
      this.$refs.calendar.reset(this.defaultDate)
    },
    //日历视图滚动时更新日历副标题数据
    dateChange(data) {
      let transDate = moment(data.date).add(1, 'months')
      if (transDate <= dateRangeMinMax[1] && transDate >= dateRangeMinMax[0]) {
        if (moment(transDate).diff(moment(dateRangeMinMax[0]), 'months') < 1) {
          transDate = moment(data.date)
        }
        const yearNum = transDate.format('YYYY')
        const monthNum = parseInt(transDate.format('MM'))
        const newDate = {
          date: new Date(transDate.format()),
          title: yearNum + '年' + monthNum + '月'
        }
        this.titleDate = newDate
      }
    },
    //视图滚动到指定日期的视图
    scrollToDate(type, dateType) {
      let transDate = ''
      if (type == 'up') {
        transDate = moment(this.titleDate.date).add(1, dateType)
      }
      if (type == 'down') {
        transDate = moment(this.titleDate.date).add(-1, dateType)
      }
      const leftDiffMonths = moment(transDate).diff(moment(dateRangeMinMax[1]), 'months')
      const rightDiffMonths = moment(dateRangeMinMax[0]).diff(moment(transDate), 'months')
      // 控制翻页范围，超出就提示
      if (leftDiffMonths <= -193 || rightDiffMonths < -194) {
        Toast.fail('已超出最大可选范围')
        return null
      }
      const yearNum = transDate.format('YYYY')
      const monthNum = parseInt(transDate.format('MM'))
      const newDate = {
        date: new Date(transDate.format()),
        title: '选择日期'
      }
      this.titleDate = newDate
      this.$refs.calendar.scrollToDate(new Date(newDate.date))
    }
  },
  watch: {
    date: {
      handler() {
        this.$emit('dateChange', this.displayDate)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.calendar {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  color: #989898;
  position: relative;
  .showDate {
    width: 100%;
    height: 28.6px;
    display: flex;
    align-items: center;
  }
  .timeSelect {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 35px;
    .btn {
      display: inline-block;
      margin-top: 10px;
      padding: 0;
      width: 54px;
      height: 30px;
      line-height: 30px;
      border: 1px solid #dfdfdf;
      border-radius: 4px;
      font-size: 12px;
    }
  }
}
</style>

